<template>
  <leftRightSplit :left-span="4">
    <el-card slot="left" header="流程应用分类">
      <treeDic v-model="queryParam.FlowType" :dic-id="DictItemDic.flowType" @change="loadFlowType" @load="loadDic" />
    </el-card>
    <el-card slot="right" :header="title">
      <div class="app-container">
        <el-form :inline="true" :model="queryParam">
          <el-form-item label="流程名">
            <el-input
              v-model="queryParam.QueryKey"
              placeholder="流程名"
              style="width: 200px"
              @change="search"
            />
          </el-form-item>
          <el-form-item label="流程状态">
            <enumItem
              v-model="queryParam.Status"
              :dic-key="EnumDic.FlowStatus"
              placeholder="流程状态"
              :multiple="true"
              sys-head="flow"
              @change="search"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              type="default"
              @click="reset()"
            >重置</el-button>
            <el-button
              v-if="checkPower('flow.info.add')"
              type="success"
              @click="addFlow()"
            >新增流程</el-button>
          </el-form-item>
        </el-form>
      </div>
      <w-table
        :data="flowList"
        :columns="columns"
        :is-paging="true"
        row-key="Id"
        :paging="paging"
        @load="load"
      >
        <template slot="createName" slot-scope="e">
          <span class="rowSpan">{{ e.row.CreateName }}</span>
          <span class="rowSpan">{{ moment(e.row.CreateTime).format('YYYY-MM-DD HH:mm') }}</span>
        </template>
        <template slot="flowType" slot-scope="e">
          <span v-if="flowType[e.row.FlowType]"> {{ flowType[e.row.FlowType].text }}</span>
        </template>
        <template slot="status" slot-scope="e">
          <el-switch
            :disabled="checkPower('flow.info.set') == false"
            :value="e.row.Status == 1"
            :inactive-text="e.row.Status == 0 ? FlowStatus[0].text : FlowStatus[2].text"
            active-text="启用"
            @change="(val) => setStatus(e.row, val)"
          />
        </template>
        <template slot="action" slot-scope="e">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-view"
            title="编辑流程"
            circle
            @click="editFlow(e.row)"
          />
          <el-button
            v-if="e.row.Status !== 0 && checkPower('flow.info.copy')"
            size="mini"
            type="warning"
            icon="el-icon-document-copy"
            title="复制流程"
            circle
            @click="copyFlow(e.row)"
          />
          <el-button
            v-if="e.row.Status !== 1 && checkPower('flow.info.set')"
            icon="el-icon-edit"
            size="mini"
            type="primary"
            title="编辑流程信息"
            circle
            @click="edit(e.row)"
          />
          <template v-if="e.row.SourceId == null">
            <el-button
              v-if="e.row.Status === 0 && checkPower('flow.info.delete')"
              size="mini"
              icon="el-icon-delete"
              type="danger"
              title="删除流程"
              circle
              @click="deleteFlow(e.row)"
            />
          </template>
          <template v-else>
            <el-button
              v-if="e.row.Status !== 1 && checkPower('flow.info.delete')"
              size="mini"
              icon="el-icon-delete"
              title="删除流程"
              type="danger"
              circle
              @click="deleteFlow(e.row)"
            />
          </template>
        </template>
      </w-table>
      <editFlowInfo :id="id" :flow-type="queryParam.FlowType" :visible.sync="infoVisible" @close="close" />
      <copyFlow :id="id" :visible.sync="copyVisible" @close="close" />
    </el-card>
  </leftrightsplit>
</template>

<script>
import moment from 'moment'
import treeDic from '@/components/base/treeDic.vue'
import { DictItemDic, EnumDic, FlowStatus } from '../../config/flowConfig'
import * as flowApi from '../../api/flow'
import editFlowInfo from './components/editFlowInfo.vue'
import copyFlow from './components/copyFlow.vue'
export default {
  components: {
    treeDic,
    editFlowInfo,
    copyFlow
  },
  data() {
    return {
      EnumDic,
      DictItemDic,
      FlowStatus,
      flowList: [],
      title: '全部流程',
      id: null,
      infoVisible: false,
      copyVisible: false,
      flowType: {},
      queryParam: {
        Status: [],
        QueryKey: null,
        FlowType: null
      },
      columns: [
        {
          key: 'FlowName',
          title: '流程名',
          align: 'left',
          minWidth: 250
        },
        {
          sortby: 'FlowType',
          key: 'FlowType',
          title: '流程分类',
          align: 'center',
          width: 120,
          slotName: 'flowType',
          sortable: 'custom'
        },
        {
          key: 'FormName',
          title: '默认表单名',
          align: 'left',
          minWidth: 150
        },
        {
          key: 'Remark',
          title: '备注',
          align: 'left',
          minWidth: 150
        },
        {
          key: 'VerNum',
          title: '版本号',
          align: 'center',
          width: 120
        },
        {
          key: 'Status',
          title: '流程状态',
          align: 'center',
          slotName: 'status',
          width: 200,
          sortable: 'custom'
        },
        {
          key: 'CreateTime',
          title: '创建人',
          align: 'center',
          slotName: 'createName',
          sortable: 'custom',
          width: 150
        },
        {
          key: 'Action',
          title: '操作',
          align: 'left',
          width: 200,
          slotName: 'action'
        }
      ],
      paging: {
        Size: 20,
        Index: 1,
        SortName: 'Id',
        IsDesc: false,
        Total: 0
      },
      rolePower: [
        'flow.info.copy',
        'flow.info.set',
        'flow.info.add',
        'flow.info.delete'
      ]
    }
  },
  computed: {},
  mounted() {
    this.initPower()
  },
  methods: {
    moment,
    close(isRefresh) {
      if (isRefresh) {
        this.reset()
      }
    },
    async initPower() {
      this.rolePower = await this.$checkPower(this.rolePower)
    },
    checkPower(power) {
      return this.rolePower.includes(power)
    },
    copyFlow(row) {
      this.id = row.Id
      this.copyVisible = true
    },
    addFlow() {
      this.id = null
      this.infoVisible = true
    },
    editFlow(row) {
      this.$router.replace({ name: 'flowNodeEdit', params: { id: row.Id }})
    },
    reset() {
      this.queryParam.QueryKey = null
      this.queryParam.Status = null
      this.paging.Index = 1
      this.load()
    },
    loadDic(e) {
      this.flowType = e.tree
      this.reset()
    },
    loadFlowType(e) {
      if (this.queryParam.FlowType == null) {
        this.title = '全部流程'
      } else {
        this.title = e.tree[this.queryParam.FlowType].text + '流程列表'
      }
      this.load()
    },
    search() {
      this.paging.Index = 1
      this.load()
    },
    async load() {
      const res = await flowApi.Query(this.queryParam, this.paging)
      if (res.List) {
        this.flowList = res.List
      } else {
        this.flowList = []
      }
      this.paging.Total = res.Count
    },
    async setStatus(row, value) {
      if (value) {
        const res = await flowApi.Enable(row.Id)
        if (res.IsError) {
          this.$message({
            type: 'error',
            message: '流程存在错误!'
          })
          return
        }
      } else {
        await flowApi.Disable(row.Id)
      }
      // eslint-disable-next-line require-atomic-updates
      row.Status = value ? 1 : 2
    },
    edit(row) {
      this.id = row.Id
      this.infoVisible = true
    },
    deleteFlow(row) {
      const title =
        '确认删除流程:' + row.FlowName + '?'
      const that = this
      this.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.submitDrop(row.Id)
      })
    },
    async submitDrop(id) {
      await flowApi.Delete(id)
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.reset()
    }
  }
}
</script>
<style scoped>
.rowSpan {
    display: inline-block;
    width: 100%;
}
</style>
